/*
 * @Author: wangqizhang
 * @Date: 2024-05-02 15:41:18
 * @LastEditors: wangqizhang
 * @LastEditTime: 2024-05-05 14:13:24
 * @FilePath: /suixinji-react/src/page/home/components/footer/comp/AddNote.tsx
 * @Description:
 *
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved.
 */
import { Form, Input, Select, Modal, message } from 'antd';
import { useState, useEffect, useRef, useContext } from 'react';
import { NoteAddProps } from '../../../../../type';
import { addNote, getGroupList } from '../../../../../api';
const { TextArea } = Input;
import MyContext from '../../../context';

const AddNote = (props: any) => {
  const context: any = useContext(MyContext);
  const { open, onCancel, onOk } = props;
  const formRef = useRef<any>(null);
  const [groupList, setGroupList] = useState<any>([
    {
      label: '默认分组',
      value: '1111',
    },
  ]);
  const getGroupData = async () => {
    const res = await getGroupList();
    if (res.code === '0000') {
      setGroupList(
        groupList.concat(
          res.data.map((item: any) => ({
            label: item.group_name,
            value: item.id,
          }))
        )
      );
    }
  };

  const handleOk = () => {
    formRef.current.validateFields().then(async (values: NoteAddProps) => {
      const res = await addNote(values);
      if (res.code === '0000') {
        message.success('添加成功');
        formRef.current.resetFields();
        context.refreshMenu();
        onCancel();
      } else {
        message.error(res.message);
      }
    });
  };
  useEffect(() => {
    if (open) {
      getGroupData();
    } else {
      return;
    }
  }, [open]);
  return (
    <Modal
      open={open}
      title="添加笔记"
      okText="保存"
      cancelText="取消"
      onCancel={onCancel}
      onOk={handleOk}
    >
      <Form
        ref={formRef}
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        initialValues={{ remember: true }}
        labelAlign="left"
        autoComplete="off"
      >
        <Form.Item<NoteAddProps>
          label="标题"
          name="note_title"
          rules={[{ required: true, message: '请输入标题!' }]}
        >
          <Input placeholder="请输入标题" />
        </Form.Item>
        <Form.Item<NoteAddProps>
          label="分组"
          name="group_id"
          rules={[{ required: true, message: '请输入标题!' }]}
        >
          <Select placeholder="请选择分组" options={groupList}></Select>
        </Form.Item>
        <Form.Item<NoteAddProps>
          label="类型"
          name="note_type"
          rules={[{ required: true, message: '请输入标题!' }]}
        >
          <Select placeholder="请选择类型">
            <Select.Option value="rich-text">富文本</Select.Option>
            <Select.Option value="markdown">MarkDown</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item<NoteAddProps>
          label="描述"
          name="note_description"
          rules={[{ required: true, message: '请输入描述内容' }]}
        >
          <TextArea placeholder="请输入描述内容" />
        </Form.Item>
      </Form>
    </Modal>
  );
};
export default AddNote;
